/*
 * @Author: wangguanqing 
 * @Date: 2018-06-29 09:10:14 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-11-21 15:51:48
 */
<template>
  <div class="gq_dataKb">
    <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
      <div slot="main" class="steelRingData">
          <div class="dataDisplay">
              <top-logo-title>
              <div slot="topTitle">钢圈网DashBoard</div>
              </top-logo-title>
              <div class="chart">
                  <div class="totalUser">
                      <p>钢圈网累计用户</p>
                      <p>{{vmTotalSteelRingInfoNew.memberCount}}</p>
                  </div>
                  <div class="leftTopView">
                      <!-- 区域分布 -->
                      <div class="region">
                          <main-title>
                              <span slot="title">区域分布</span>
                          </main-title>
                          <!-- pieChart 位置 -->
                          <div style="width:313px;height:167px;">
                            <pie-chart class="areaChart" v-model="areaArr" :option="areaOption"></pie-chart>
                          </div>
                      </div>
                      <!-- 用户活跃度趋势 -->
                      <div class="activity userYue">
                          <main-title>
                              <span slot="title">用户活跃度趋势</span>
                          </main-title>
                          <!-- lineChart 位置 -->
                          <div style="width:368px;height:150px;">
                            <line-chart v-model="livenessArr" :chartStyle="'width:368px;min-height:200px;'" :option="lineChartOption"></line-chart>
                          </div>
                      </div>
                      <section class="label">
                        <div class="shopNumber">
                              <p>店铺覆盖城市</p>
                              <p>{{vmTotalSteelRingInfoNew.shopAreaCount}}<span>个</span></p>
                          </div>
                          <div class="shopNumber">
                              <p>店铺数量</p>
                              <p>{{vmTotalSteelRingInfoNew.shopCount}}<span>个</span></p>
                          </div>
                          <div class="dayShelf">
                              <p>今日上架</p>
                              <p>{{entryOrders}}<span>T</span></p>
                          </div>
                          <div class="shopNumber">
                              <p>品牌数量</p>
                                                            <p>{{factoryTotal}}<span>个</span></p>
                          </div>
                      </section>
                  </div>
                  <div class="leftBotView">
                      <div class="distribution">
                        <div class="left">
                          <main-title>
                            <span slot="title">价格趋势(元)</span>
                          </main-title>
                          <!-- 价格趋势 位置 -->
                          <div class="bubbleCon">
                            <span>最新:{{bulleMessage}}¥</span>
                          </div>
                          <line-chartss class="leftChart" :chartStyle="'width:566px;min-height:330px;'" :option="lineChartssOption" v-model="grossProfitOption"></line-chartss>
                        </div>
                          <div class="right">
                            <main-title>
                                <span slot="title">价格指数-{{message}}(元)</span>
                            </main-title>
                            <div class="bubbleCon">
                              <span>最新:{{messageValue}}¥</span>
                            </div>
                            <steel-ring-k-chart class="kChart" @name="changeName" v-model="priceIndexArr" :chartStyle="'width:566px;min-height:270px;'" ></steel-ring-k-chart>
                          </div>
                      </div>
                  </div>
                  
                  <div class="centerView">
                      <p class="title">今日实时成交量 ({{vmTotalSteelRingInfoNew.currentDayOrderWeightUnit ? vmTotalSteelRingInfoNew.currentDayOrderWeightUnit: '吨'}})</p>
                      <div style="display:flex;justify-content:center;margin-top:20px">
                        <turn-page-num :numStyle="'font-size:92px;height:122px;width:60px'" :decimalnumStyle="'font-size:92px;height:122px;width:60px'"  v-model="vmTotalSteelRingInfoNew.currentDayOrderWeight"></turn-page-num>
                      </div>
                      <div class="deal">
                          <p class="txt">同比昨天
                            <i v-if="positive" class="el-icon-caret-top"></i>
                            <i v-if="vmTotalSteelRingInfoNew.currentDayOrderWeightRingRatio === 0"></i>
                            <i v-if="!positive" class="el-icon-caret-bottom"></i>
                          </p>
                          <turn-page-num :decimal="false" :decimalnumStyle="'width: 30px;height: 66px;font-size: 50px'"  :numStyle="'width: 30px;height: 66px;font-size: 50px'" v-model="vmTotalSteelRingInfoNew.currentDayOrderWeightRingRatio"></turn-page-num>
                          <div class="num"><span>%</span></div>
                          <p class="txt">
                              <span class="txt leftTxt">成交额</span>
                              <span class="numStyle">{{vmTotalSteelRingInfoNew.currentDayOrderAmount.toFixed(2)}}</span>
{{vmTotalSteelRingInfoNew.currentDayOrderAmountUnit ? vmTotalSteelRingInfoNew.currentDayOrderAmountUnit: '元'}}
                          </p>
                      </div>
                      <!-- 最新成交 -->
                      <div class="news">
                      <div class="title">
                          <img src="../../../../../static/img/gq/newsLogo.png">
                          <span>最新成交</span>
                      </div>
                      <div class="swiper_wrap">
                          <ul class="font_inner">
                              <li v-for="(rowItem,rowId) in dataArr" :key="rowId">
                                  <div class="text">
                                      <p> <span>{{rowItem.shopName}}</span>
                                      <span>{{rowItem.goodsDetail}}</span>
                                      </p>
                                  </div>
                                  <div class="textRight" >
                                      <p> 
                                        <span class="number" style="text-align:right;display: inline-block;">￥{{rowItem.totalAmount}}</span>
                                        <span style="text-align:right">共{{rowItem.goodsCategoryCount}}件商品</span>
                                      </p>
                                  </div>
                              </li>
                          </ul>
                      </div>
                      </div>
                  </div>
                  <div class="rightTopView">
                      <!-- 挂单量分布 -->
                      <div class="succeedTrend">
                        <main-title>
                          <span slot="title">挂单量分布</span>
                        </main-title>
                        <div class="rightTopChart">
                          <steel-ring-relation v-model="measured"></steel-ring-relation>
                        </div>
                        <div class="circleCon">
                          <div class="circle">
                            <span class="text" v-bind:style="{fontSize: measureItem.deliveryArea && measureItem.deliveryArea.length > 3 ? '16px':'16px'}">{{measureItem.deliveryArea}}</span>
                            <span class="num">{{measureItem.totalWeight}}</span>
                          </div>
                          <img class="img" src="../../../../../static/img/gq/steelCircleLIne.png">
                          <div id="measureTab" class="tab">
                              <div v-for="(item, index) in measureItem.deliveryAreaList" :key="index" class="tabItem">
                              <p>{{item.product}}</p>
                              </div>
                          </div>
                          <div class="myTable">
                            <div class="myTableHead">
                                <span>品牌</span>
                                <span>材质</span>
                                <span>规格</span>
                                <span>挂单量</span>
                              </div>
                              <div class="myTableBody">
                                <ul class="myTableUl">
                                  <li v-for="(rowItem,rowId) in tableData" :key="rowId">
                                      <span>{{rowItem.factory}}</span>
                                      <span>{{rowItem.material}}</span>
                                      <span>{{rowItem.spec}}</span>
                                      <span>{{rowItem.weight}}</span>
                                  </li>
                                </ul>
                              </div>
                            </div>
                        </div>
                      </div>
                  </div>
                  <div class="rightBotView">
                      <div class="priceIndex">
                          <main-title>
                              <span slot="title">成交量趋势</span>
                          </main-title>
                          <div style="width:573px;height:188px;margin-top:30px;margin-bottom:60px;">
                            <line-chart v-model="turnoverArr" :chartStyle="'width:573px;min-height:200px;'" :option="turnoverOption"></line-chart>
                          </div>
                      </div>
                  </div>

              </div>
          </div>
      </div>
    </bg-lay-out>
  </div>
</template>
<script>
var tableAutoTimer = 0;
var autoTimer = 0;
require("@/components/gq/l-slide.js");
import topLogoTitle from "@/components/gq/topLogoTitle";
import mainTitle from "@/components/gq/mainTitle";
import bgLayOut from "@/components/bgLayOut/index";
import transPortMap from "@/components/gq/transPortMap.vue";
import steelRingRelation from "@/components/gq/steelRingRelation.vue";
import lineChart from "@/components/Charts/lineChart";
import lineChartss from "@/components/Charts/lineChartss";
import pieChart from "@/components/Charts/pieChart";
import steelRingKChart from "@/components/gq/steelRingKChart.vue";
import turnPageNum from "@/components/turnPageNum/index.vue";
import pinBall from "@/components/gq/pinBall.vue";
import {
  GetTotalSteelRingInfoNew,
  GetSteelRingVolumeDistribution,
  GetVolumeTrend,
  GetLatestOrderList,
  GetSteelRingPriceTrendFun,
  GetPriceIndexList,
  GetActiveUsers
} from "@/api/gq/index";
export default {
  name: "index",
  components: {
    topLogoTitle,
    transPortMap,
    mainTitle,
    bgLayOut,
    lineChart,
    lineChartss,
    steelRingRelation,
    pieChart,
    steelRingKChart,
    turnPageNum,
    pinBall
  },
  beforeDestroy() {
    clearInterval(tableAutoTimer);
    clearInterval(autoTimer);
    clearInterval(this.autoTimer);
    clearInterval(this.timer);
    clearInterval(this.getVolumTimer);
  },
  data() {
    return {
      factoryTotal: 0,
      timer: null,
      priceIndexArr: [], // 价格指数
      positive: true, // 是否为正数
      vmTotalSteelRingInfoNew: {
        currentDayOrderAmount: 0.0, // 今日订单成交额 ,
        currentDayOrderWeightRingRatio: 0.0, // 今日订单成交额环比 ,
        currentDayOrderWeight: Number, // 今日订单成交量 ,
        memberCount: 0.0, // 累计用户数 ,
        shopCount: 0.0 // 店铺数
      },
      turnoverArr: [], // 成交量趋势
      entryOrders: 0, // 挂单量
      gqDataList: [], // 挂单量分布
      bulleMessage: "",
      bulleMessageArr: [],
      messageArr: ["盘螺", "钢坯", "线材", "螺纹钢"],
      message: "盘螺",
      messageValue: 0,
      grossProfitOption: [], // 价格趋势
      lineChartssOption: {
        openDataZoom: true,
        legendColor: "#28E787",
        showSymbol: "none",
        tooltip: {
          show: false
        },
        grid: {
          right: 10
        },
        legend: {
          top: "0",
          right: "0"
        },
        label: {
          show: true
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            interval: 6,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          max: 4500,
          min: 3900,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        hideLineColor: true,
        color: ["#00D1FF", "#8693F3", "#E95A24", "#F0BD26"]
      },
      lineChartOption: {
        showSymbol: "none",
        label: {
          show: true
        },
        dataZoom: [
          {
            end: 100
          }
        ],
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            interval: 2,
            rich: {
              // x轴富文本样式
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(0,209,255,0.7)",
        endColor: "rgba(0,209,255,0.2)",
        color: "rgb(0,209,255)"
      },
      turnoverOption: {
        grid: {
          top: 10,
          right: 10
        },
        openDataZoom: true,
        showSymbol: "none",
        showLabel: false,
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            interval: 6,
            rich: {
              value: {
                color: "rgb(40, 231, 135)"
              }
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "rgb(40, 231, 135)"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        startColor: "rgba(233,90,36,0.7)",
        endColor: "rgba(233,90,36,0.2)",
        color: "rgb(233,90,36)"
      },
      livenessArr: [], // 活跃度
      measured: [],
      measureItem: {}, // 挂单量分部
      tableData: [],
      dataArr: [],
      areaArr: [], // 区域分布
      areaOption: {
        circulation: true,
        autoLabel: true,
        hoverPosion: "center",
        color: [
          "#27E588",
          "#EA1E7A",
          "#ED5B22",
          "#EFBE24",
          "#8692F5",
          "#00D0FF",
          "#2FEFD0"
        ],
        radius: ["42%", "47%"],
        center: ["30%", "40%"],
        legendColor: "#28E787",
        autoTimer: null,
        legend: {
          orient: "vertical",
          top: 50,
          right: 50,
          itemWidth: 5,
          itemHeight: 5
        }
      }
    };
  },
  mounted() {
    this.fetchData();
    this.initAreaChart(); // 区域分布
    var self = this;
    // this.autoTimer = setInterval(() => {
    //   // 静默请求
    //   this.$utils.showLoading = false;
    //   self.repFetch();
    // }, 5000);
  },
  methods: {
    changeName(e) {
      this.$set(this, "messageValue", e.value);
      this.$set(this, "message", e.name);
    },
    async fetchPriceIndex() {
      this.$utils.showLoading = false;
      try {
        var res = await GetPriceIndexList();
        if (res.data.code === "0") {
          var resData = res.data.result;
          resData.forEach(item => {
            item.marketPriceList.forEach(marketItem => {
              marketItem.date = marketItem.date.slice(
                5,
                marketItem.date.length
              );
            });
            item.mallPriceList.forEach(mallItem => {
              mallItem.date = mallItem.date.slice(5, mallItem.date.length);
            });
          });
          this.$set(this, "priceIndexArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      this.fetchPriceIndex(); // 价格指数
      this.fetchVmTotalSteelRingInfoNew(); // 整体数据
      this.GetLatestOrderListFun(); // 最新成交订单列表
      this.GetgrossProfitOption(); // 获取当月实时价格趋势
      this.GetVolumeTrendFun(); // 成交量趋势
      this.GetSteelRingVolumeDistributionFun(); // 获取挂单量分布
      this.vehicleListFun();
      this.fetchUserActive(); // 用户活跃度
      this.autoTimer = setInterval(() => {
        // 静默请求
        this.$utils.showLoading = false;
        this.fetchVmTotalSteelRingInfoNew();
      }, 300000);
    },
    repFetch() {
      clearInterval(tableAutoTimer);
      clearInterval(self.autoTimer);
      clearInterval(self.timer);
      clearInterval(self.getVolumTimer);
      this.fetchPriceIndex(); // 价格指数
      this.fetchVmTotalSteelRingInfoNew(); // 整体数据
      this.GetLatestOrderListFun(); // 最新成交订单列表
      this.GetgrossProfitOption(); // 获取当月实时价格趋势
      this.GetVolumeTrendFun(); // 成交量趋势
      this.GetSteelRingVolumeDistributionFun(); // 获取挂单量分布
      this.fetchUserActive(); // 用户活跃度
    },
    // 获取当月实时价格趋势
    async GetgrossProfitOption() {
      this.$utils.showLoading = false;
      try {
        const paramsData = {
          isTest: null
        };
        var res = await GetSteelRingPriceTrendFun(paramsData);
        if (res.data.code === "0") {
          const lineChartssData = [];
          const newBulleMessageArr = [
            "盘螺 " +
              res.data.result.list[res.data.result.list.length - 1].diskPrice,
            "钢坯 " +
              res.data.result.list[res.data.result.list.length - 1].billetPrice,
            "线材 " +
              res.data.result.list[res.data.result.list.length - 1].wirePrice,
            "螺纹钢 " +
              res.data.result.list[res.data.result.list.length - 1].threadPrice
          ];
          this.$set(
            this.lineChartssOption.yAxis,
            "min",
            res.data.result.min - 10
          );
          this.$set(
            this.lineChartssOption.yAxis,
            "max",
            res.data.result.max + 10
          );
          this.$set(this, "bulleMessageArr", newBulleMessageArr);
          this.setBulle();
          res.data.result.list.forEach(item => {
            const newObj = {
              name: item.date.slice(5, item.date.length),
              list: [
                {
                  name: "盘螺",
                  value: item.diskPrice
                },
                {
                  name: "线材",
                  value: item.wirePrice
                },
                {
                  name: "螺纹钢",
                  value: item.threadPrice
                },
                {
                  name: "钢坯",
                  value: item.billetPrice
                }
              ]
            };
            lineChartssData.push(newObj);
          });
          this.$set(this, "grossProfitOption", lineChartssData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 最新成交订单列表
    async GetLatestOrderListFun() {
      this.$utils.showLoading = false;
      try {
        var res = await GetLatestOrderList();
        if (res.data.code === "0") {
          this.$set(this, "dataArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 成交量趋势
    async GetVolumeTrendFun() {
      this.$utils.showLoading = false;
      try {
        var res = await GetVolumeTrend();
        if (res.data.code === "0") {
          res.data.result.forEach(item => {
            item.xData = item.xData.slice(5, item.xData.length);
          });
          this.$set(this, "turnoverArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取挂单量分布
    async GetSteelRingVolumeDistributionFun() {
      this.$utils.showLoading = false;
      try {
        var res = await GetSteelRingVolumeDistribution();
        if (res.data.code === "0") {
          this.$set(this, "entryOrders", res.data.result.total);
          this.$set(this, "gqDataList", res.data.result.list);
          this.$set(this, "factoryTotal", res.data.result.factoryTotal);
          this.switchMeasured(0); // 切换挂单量
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 整体数据
    async fetchVmTotalSteelRingInfoNew() {
      this.$utils.showLoading = false;
      try {
        var res = await GetTotalSteelRingInfoNew();
        if (res.data.code === "0") {
          var resData = res.data.result;
          resData.currentDayOrderAmount = Number(resData.currentDayOrderAmount);
          resData.currentDayOrderWeightRingRatio = Number(
            resData.currentDayOrderWeightRingRatio.toFixed(1)
          );
          if (resData.currentDayOrderWeightRingRatio > 0) {
            this.positive = true;
          } else if (resData.currentDayOrderWeightRingRatio < 0) {
            this.positive = false;
          }
          resData.currentDayOrderWeightRingRatio = Math.abs(
            resData.currentDayOrderWeightRingRatio
          );
          this.$set(this, "vmTotalSteelRingInfoNew", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 设置冒泡
    setBulle() {
      var self = this;
      var n = 0;
      setInterval(function() {
        if (n > 3) {
          n = 0;
        }
        self.$set(self, "bulleMessage", self.bulleMessageArr[n]);
        n++;
      }, 2000);
    },
    // 区域分布
    initAreaChart() {
      var arr = [
        {
          name: "华东",
          value: 32
        },
        {
          name: "华南",
          value: 31
        },
        {
          name: "华中",
          value: 13
        },
        {
          name: "华北",
          value: 8
        },
        {
          name: "西南",
          value: 8
        },
        {
          name: "东南",
          value: 4
        },
        {
          name: "东北",
          value: 4
        }
      ];
      this.$set(this, "areaArr", arr);
    },
    // 切换挂单量
    switchMeasured(num) {
      if (num > this.gqDataList.length - 1) {
        num = 0;
      }
      this.$set(this, "measureItem", this.gqDataList[num]);
      var changeMeasure = [];
      changeMeasure = this.gqDataList.filter(item => {
        return item.deliveryArea !== this.measureItem.deliveryArea;
      });
      this.$set(this, "measured", changeMeasure);
      // 螺纹高亮
      var self = this;
      setTimeout(() => {
        self.setHeightItem(num, 0);
      }, 10);
    },
    async fetchUserActive() {
      try {
        var res = await GetActiveUsers();
        if (res.data.code === "0") {
          var resData = res.data.result;
          resData.forEach(item => {
            item.xData = item.xData.slice(5, item.xData.length);
          });
          this.$set(this, "livenessArr", resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 高亮
    setHeightItem(num, numItem) {
      var itemHml = $("#measureTab")[0].children[numItem].style;
      var lastItemHml = null;
      itemHml.background = "#f0bd26";
      itemHml.color = "#000";
      if (numItem === 0) {
        lastItemHml = $("#measureTab")[0].children[3].style;
        lastItemHml.background = "#000";
        lastItemHml.color = "#f0bd26";
      } else {
        lastItemHml = $("#measureTab")[0].children[numItem - 1].style;
        lastItemHml.background = "#000";
        lastItemHml.color = "#f0bd26";
      }
      // 挂单量table
      this.tableListFun(num, numItem);
    },
    tableListFun(num, numItem) {
      var self = this;
      self.$set(
        this,
        "tableData",
        self.measureItem.deliveryAreaList[numItem].productList
      );
      var tableIndex = 0;
      function tableTab() {
        if (
          $(".myTableUl")[0].scrollHeight +
            $(".myTableUl")[0].offsetTop -
            $(".myTableBody").height() -
            1 <=
          $(".myTableBody li").height()
        ) {
          clearInterval(tableAutoTimer);
          $(".myTableUl").css("top", 0);
          if (numItem === 3) {
            self.switchMeasured(num + 1);
          } else {
            self.setHeightItem(num, numItem + 1);
          }
        } else {
          if (tableIndex === 1) {
            $(".myTableUl").animate(
              {
                top: -tableIndex * $(".myTableBody li").height()
              },
              400,
              tableTab
            );
          } else {
            $(".myTableUl")
              .stop()
              .animate(
                {
                  top: -tableIndex * $(".myTableBody li").height()
                },
                400,
                tableTab
              );
          }
        }
      }

      function TableNext() {
        tableIndex++;
        if ($(".myTableBody").height() >= $(".myTableUl").height) {
          // 判断index为最后一个Li时tableIndex为0
          tableIndex = 0;
        }
        tableTab();
      }
      // 自动轮播
      tableAutoTimer = setInterval(TableNext, 1000);
    },
    vehicleListFun() {
      $(".font_inner li:eq(0)")
        .clone(true)
        .appendTo($(".font_inner")); // 克隆第一个放到最后(实现无缝滚动)
      var liHeight = $(".swiper_wrap").height(); // 一个li的高度
      // 获取li的总高度再减去一个li的高度(再减一个Li是因为克隆了多出了一个Li的高度)
      var totalHeight =
        $(".font_inner li").length *
          $(".font_inner li")
            .eq(0)
            .height() -
        liHeight;
      $(".font_inner").height(totalHeight); // 给ul赋值高度
      var index = 0;
      function tab() {
        $(".font_inner")
          .stop()
          .animate(
            {
              top: -index * liHeight
            },
            400,
            function() {
              var count =
                ($(".font_inner li").length *
                  $(".font_inner li")
                    .eq(0)
                    .height()) /
                liHeight;
              if (index === parseInt(count)) {
                $(".font_inner").css({ top: 0 });
                index = 0;
              }
            }
          );
      }
      function next() {
        index++;
        tab();
      }
      // 自动轮播
      autoTimer = setInterval(next, 3000);
      $(".font_inner a").hover(
        function() {
          clearInterval(autoTimer);
        },
        function() {
          autoTimer = setInterval(next, 3000);
        }
      );

      // 鼠标放到左右方向时关闭定时器
      $(".swiper_wrap").hover(
        function() {
          clearInterval(autoTimer);
        },
        function() {
          autoTimer = setInterval(next, 3000);
        }
      );
      // -----------------------------右上滚动---------
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

@mixin backBorRadius($color1: #000, $color2: #f0bd26, $radius: 10px) {
  color: $color2;
  background-color: $color1;
  border: 1px solid $color2;
  border-radius: $radius;
}
@mixin color($color1: #f0bd26, $color2: rgba(#006953, 0.5)) {
  color: $color1;
  background-color: $color2;
}
.smallUnit {
  align-self: flex-end;
  margin-left: 5px;
  font-size: 20px;
  font-size: 10px;
  color: #f0bd26;
}
.steelRingData {
  .map {
    @include absoluteAllSides(110, 0, 0, 0, 1);
    // 地图
  }
  .dataDisplay {
    @include absoluteAllSides(0, 0, 0, 0, 10);

    & .chart {
      @include absoluteAllSides(80, 30, 0, 0, 1);
      overflow: hidden;

      .totalUser {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 193px;
        left: 0;
        z-index: 1;
        width: 195px;
        height: 94px;
        background-color: #006953;
        border-top-right-radius: 3rem;
        border-bottom-right-radius: 3rem;
        & p {
          color: #f0bd26;
        }
        & p:nth-of-type(1) {
          font-size: 22px;
        }
        & p:nth-of-type(2) {
          line-height: 1;
          @include din(34px);
        }
        &:before {
          content: "";
          position: absolute;
          top: -136px;
          right: -50px;
          z-index: 1;
          width: 51px;
          height: 134px;
          background: url("../../../../../static/img/gq/line1.png") left top
            no-repeat;
          background-size: 100% 100%;
        }
        &:after {
          content: "";
          position: absolute;
          right: 0px;
          bottom: -270px;
          z-index: 1;
          width: 16px;
          height: 261px;
          background: url("../../../../../static/img/gq/line2.png") left top
            no-repeat;
          background-size: 100% 100%;
        }
      }

      .leftTopView {
        position: absolute;
        top: 5px;
        left: 250px;
        z-index: 1;
        .userYue {
          margin-top: 51px;
        }
        .region {
          &::after {
            content: "";
            position: absolute;
            top: 52px;
            right: -65px;
            z-index: 1;
            width: 234px;
            height: 85px;
            background: url("../../../../../static/img/gq/line3.png") left top
              no-repeat;
            background-size: 100% 100%;
          }
          .areaChart {
            position: absolute;
            top: 22px;
            bottom: 0;
            right: 0;
            left: 0;
          }
        }
        .activity {
          &::after {
            content: "";
            position: absolute;
            right: -65px;
            bottom: -118px;
            z-index: 1;
            width: 30px;
            height: 226px;
            background: url("../../../../../static/img/gq/line4.png") left top
              no-repeat;
            background-size: 100% 100%;
          }
        }
        .label {
          display: flex;
          position: absolute;
          bottom: -150px;
          left: -32px;
          .shopNumber,
          .dayShelf {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 103px;
            height: 70px;
            font-size: 16px;
            @include backBorRadius;
            p:nth-of-type(1) {
              font-size: 16px;
              line-height: 35px;
            }
            & p:nth-of-type(2) {
              line-height: 30px;
              @include din(24px);
              & span {
                margin-left: 5px;
                font-size: 20px;
              }
            }
          }
        }
      }
      .leftBotView {
        position: absolute;
        bottom: 40px;
        left: 32px;
        z-index: 1;
        .distribution {
          display: flex;
          flex: 0.5;
          width: 1217px;
          height: 330px;
          &::after {
            content: "";
            position: absolute;
            top: 33px;
            right: 0;
            z-index: 1;
            width: 1192px;
            height: 310px;
            background: url("../../../../../static/img/gq/line6.png") left top
              no-repeat;
            background-size: 100% 100%;
          }
          .left {
            position: relative;
            width: 600px;
            margin-top: 60px;
            .leftChart {
              position: absolute;
              top: 10px;
            }
            .bubbleCon {
              position: absolute;
              top: 36px;
              right: 14px;
              background-image: url("../../../../../static/img/gq/bubble.png");
              background-size: 100% 100%;
              width: 126px;
              height: 37px;
              text-align: center;
              line-height: 30px;
              span {
                color: #28e787;
                font-size: 14px;
              }
            }
          }
          .right {
            position: relative;
            width: 600px;
            margin-top: 60px;
            .kChart {
              position: absolute;
              top: 10px;
            }
            .bubbleCon {
              position: absolute;
              top: 36px;
              right: 14px;
              background-image: url("../../../../../static/img/gq/bubble.png");
              background-size: 100% 100%;
              width: 126px;
              height: 37px;
              text-align: center;
              line-height: 30px;
              span {
                color: #28e787;
                font-size: 14px;
              }
            }
          }
        }
      }
      .centerView {
        position: absolute;
        top: 80px;
        left: 38.5%;
        z-index: 1;
        text-align: center;
        // &::before {
        //   content: "";
        //   position: absolute;
        //   top: -39px;
        //   right: -63px;
        //   z-index: 1;
        //   width: 53px;
        //   height: 102px;
        //   background: url("../../../../../static/img/gq/line7.png") left top
        //     no-repeat;
        //   background-size: 100% 100%;
        // }
        .title {
          font-weight: bold;
          color: #28e787;
          font-size: 30px;
        }
        .number i {
          display: inline-block;
          width: 66px;
          height: 132px;
          margin-right: 5px;
          @include color;
          @include din(100px);
          text-align: center;
        }
        .deal {
          display: flex;
          justify-content: center;
          align-items: baseline;
          margin-top: 30px;
          & .txt {
            font-weight: bold;
            color: #28e787;
            font-size: 25px;
            .numStyle {
              @include din(50px);
            }
            .leftTxt {
              margin-left: 10px;
            }
            .el-icon-caret-top {
              margin: 0 3px;
              color: red;
            }
            .el-icon-caret-bottom {
              margin: 0 3px;
              position: static;
              font-size: 25px;
              color: #28e787;
            }
          }
          & .num {
            i {
              display: inline-block;
              width: 30px;
              height: 66px;
              @include color;
              @include din(50px);
              text-align: center;
            }
            span {
              color: #f0bd26;
              @include din(29px);
            }
          }
          & .number {
            margin-left: 10px;
            span {
              color: #28e787;
              @include din(20px);
            }
          }
          p:nth-of-type(1) {
            display: flex;
            align-items: flex-end;
          }
          p:nth-of-type(3) {
            display: flex;
            align-items: center;
            margin-left: 30px;
          }
          p:nth-of-type(3) span:nth-of-type(2) {
            margin-left: 20px;
            @include din(34px);
          }
        }
        .news {
          display: flex;
          justify-content: center;
          align-items: baseline;
          margin-top: 280px;
          position: absolute;
          flex-direction: column;
          top: 0;
          z-index: 1;
          .title {
            display: flex;
            width: 150px;
            // color: #f0bd26;
            margin-top: 20px;
            margin-right: 50px;
            & img {
              width: 20px;
              height: 22px;
            }
            .text,
            & span {
              line-height: 22px;
              font-size: 20px;
            }
          }
          .swiper_wrap {
            height: 230px;
            display: flex;
            flex-direction: column;
            color: #28e787;
            overflow: hidden;
            & .font_inner {
              position: relative;
              top: 0;
              left: 0;
              z-index: 1;
              width: 410px;
              & li {
                height: 54px;
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                .text,
                .number {
                  display: flex;
                  justify-content: flex-start;
                }
                .text p {
                  display: flex;
                  flex-direction: column;
                  line-height: 22px;
                  text-align: left;
                  & span:nth-of-type(1) {
                    margin-bottom: 8px;
                    @include din(16px);
                  }
                  & span:nth-of-type(2) {
                    @include din(16px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                  }
                }
                .textRight p {
                  display: flex;
                  flex-direction: column;
                  width: 130px;
                  line-height: 22px;
                  text-align: left;
                  & span:nth-of-type(1) {
                    margin-bottom: 8px;
                    @include din(16px);
                  }
                  & span:nth-of-type(2) {
                    @include din(16px);
                  }
                }
                .number {
                  @include din(16px);
                }
              }
            }
          }
        }
      }
      .rightTopView {
        position: absolute;
        left: 69%;
        right: 10px;
        top: 10px;
        &::before {
          content: "";
          // position: absolute;
          // top: 16px;
          // right: 61px;
          // z-index: 1;
          // width: 369px;
          // height: 4px;
          // background: url("../../../../../static/img/gq/line9.png") left top
          //   no-repeat;
          // background-size: 100% 100%;
        }
        .succeedTrend {
          .rightTopChart {
            position: relative;
            margin-top: 20px;
            height: 200px;
            width: 530px;
          }
          .circleCon {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            top: -43px;
            .circle {
              width: 88px;
              height: 88px;
              border-radius: 50%;
              background: #006953;
              color: #f0bd26;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              .num {
                @include din(23px);
              }
            }
            .img {
              width: 303px;
              height: 17px;
              position: absolute;
              top: 20%;
            }
            .tab {
              flex-direction: row;
              display: flex;
              justify-content: space-around;
              width: 400px;
              .tabItem {
                width: 86px;
                height: 52px;
                line-height: 52px;
                text-align: center;
                font-size: 20px;
                margin: 15px 0;
                padding-left: 4px;
                @include backBorRadius;
              }
            }
            .myTable {
              padding-right: 20px;
              width: 100%;
              height: 272px;
              .myTableHead {
                display: flex;
                justify-content: space-around;
                font-size: 18px;
                color: #28e787;
                width: 100%;
                background: rgba($color: #006953, $alpha: 0.4);
                span {
                  line-height: 40px;
                  display: inline-block;
                  width: calc(100% / 4);
                  text-align: center;
                  word-wrap: break-word;
                }
              }
              .myTableBody {
                position: relative;
                width: 100%;
                height: 240px;
                margin: 0 auto;
                overflow: hidden;
                ul {
                  position: relative;
                  top: 0;
                  left: 0;
                  width: 100%;
                  float: right;
                  color: #444;
                  font-size: 14px;
                  margin-top: 1px;
                  li {
                    display: flex;
                    justify-content: space-around;
                    font-size: 16px;
                    color: #28e787;
                    width: 100%;
                    span {
                      line-height: 40px;
                      display: inline-block;
                      width: calc(100% / 4);
                      text-align: center;
                      word-wrap: break-word;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .rightBotView {
        position: absolute;
        right: 10px;
        bottom: 0px;
        &::before {
          content: "";
          position: absolute;
          top: -358px;
          left: -63px;
          z-index: 1;
          width: 622px;
          height: 640px;
          background: url("../../../../../static/img/gq/line10.png") left top
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>


